<template>
  <el-scrollbar style="padding:0 30px;box-sizing: border-box">
    <!-- <div
      v-for="(item, index) in datalist"
      :key="index"
      :style="{}"
      class="marklistitem fb"
      @mouseleave="mouseleave(item)"
      @mouseenter="mouseenter(item)"
    > -->
    <br>
    <el-form label-width="auto" style="max-width: 500px">
      <el-form-item label="层级" v-if="true">
        <el-checkbox-group v-model="checkboxGroup1" size="small">
          <el-checkbox-button style="" v-for="city in levelarr1" :key="city" :value="city">
            <div style="width: 15px;">
              {{ city }}
            </div>
          </el-checkbox-button>
        </el-checkbox-group>
        <el-checkbox-group v-model="checkboxGroup1" size="small">
          <el-checkbox-button style="" v-for="city in levelarr2" :key="city" :value="city">
            <div style="width: 15px;">
            {{ city }}

            </div>

          </el-checkbox-button>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="区域">

        <div class="fr" style="height: 30px;">
          <!-- <el-radio-group v-model:value="radio1">
            <el-radio value="huizhi" key="huizhi">绘制</el-radio>
            <el-radio value="shangchuan" key="shangchuan">上传</el-radio>
          </el-radio-group> -->

          <n-radio-group v-model:value="form.quyutype" name="radiobuttongroup1">
            <n-radio
              :key="'huizhi'"
              :value="'huizhi'"
              :label="'绘制'"
            />
            <n-radio
              :key="'shangchuan'"
              :value="'shangchuan'"
              :label="'上传'"
            />
          </n-radio-group>

          <el-button-group v-if="form.quyutype == 'huizhi'">
            <el-button type="mini" @click="drawretangle">矩形</el-button>
            <el-button type="mini" @click="drawpolygon">多边形</el-button>
          </el-button-group>

          <el-upload
              multiple
              v-if="form.quyutype == 'shangchuan'"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :limit="3"
              :on-exceed="handleExceed"
          >
            <el-button type="primary">矢量文件导入</el-button>
            <template #tip>
              <div class="el-upload__tip">
              </div>
            </template>
          </el-upload>
        </div>


      </el-form-item>
      <el-form-item label="时间段" v-if="true">
        <el-date-picker
          v-model="form.datarange"
          type="daterange"
          start-placeholder="开始"
          end-placeholder="结束"
          :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
        />
      </el-form-item>
      <el-form-item>
        <div class="btns" style="display: flex;width: 100%;">
          <el-button type="primary" @click="onSubmit">开始处理</el-button>
          <el-button>重置</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-scrollbar>
</template>

<script setup>
import {onMounted, onBeforeMount, ref, onUnmounted, watch, reactive} from 'vue'

let searchValKeyWord = ref('')
import {useEarthStore} from "@/stores/earth";

const earthStore = useEarthStore();
let dataList = ref([])
const form = reactive({
    quyutype: 'huizhi',
    datarange: []
})

const radio1 = ref('huizhi')

let levelarr1 = [
  1,
  2,
  3,
  4,
  5,
  6,
  7,
  8,
  9,
  10,
]
let levelarr2 = [
  11,
  12,
  13,
  14,
  15,
  16,
  17,
  18,
  19,
  20,
]

function itemclick(item) {
  console.log('执行卷帘')

  let item1 = [
    {
      type: "tif",
      // filename: `http://127.0.0.1:8080/a.tif`,
      filename: '/20191104-HXH.tif',
      domname: '/20191104-HXH.tif',
      // filename: "hxh.tif",
    },
    {
      type: "tif",
      // filename: `http://127.0.0.1:8080/a.tif`,
      filename: '/20180410-HXH.tif',
      domname: '/20180410-HXH.tif',
      // filename: "hxh.tif",
    },
  ];
  // 清空
  delete earthStore.pannellist["rollerpannel"];
  setTimeout(() => {
    earthStore.pannellist["rollerpannel"] = {
      name: "roller-pannel",
      options: {
        data: item1,
      },
    };
  }, 0);
}

function searchclick() {
  dataList.value = [
    {
      id: 1,
      name: '横须贺港口',
      filename: '/20180410-HXH.tif'
    }
  ]
}

onBeforeMount(() => {
  console.log(earthStore.pannellist, 'earthStore.pannellist')
  delete earthStore.pannellist['searchresultpannel']
})
function qingkongclick() {

}
function closewindow(){
  qingkongclick()
}
</script>
<style lang='scss' scoped>
.timelinespeed {
  // margin:0 auto;
  // width:500px;
}

.timelinespeed .el-slider__stop {
  height: 9px;
  margin-top: -8px;
  width: 2px;
  border-radius: 0;
  background-color: #E4E7ED;
}

.timelinespeed .el-slider__marks-text {
  margin-top: -30px;
}

.timelinespeed .el-slider__button {
  width: 3px !important;
  // height: 14px;
  border-radius: 0px !important;
  // background: url(earthsdk/XbsjCesium/Widgets/Images/TimelineIcons.png) no-repeat center;
  background-color: #409EFF;
  border: 1px solid #409EFF;
  transform: rotate(-0deg) !important;
}

.timelinespeed .el-slider__button.hover,
.el-slider__button:hover {
  transform: rotate(-0deg);
}

.sliderdiv {
  background-color: #44495288;
  border-radius: 3px;
  z-index: 10;

  .demonstration {
    line-height: 30px;
    padding: 0px 3px;;
  }
}

.earth-search-bar {
  position: absolute;
  top: 10px;
  left: 30px;
  z-index: 4;
  display: flex;
  width: 500px;
}

.marklistitem {
  border: 1px solid white;
  padding: 10px;
  // cursor: pointer;
  margin: 10px;
  // width: 85%;
}

.upload-demo {
  width: 100%;
  //margin-bottom: 20px;
  //margin-top: 10px;
  display: flex;
  //justify-content: center;
}
</style>
